<template>
  <div class="app-container " style="width: 81.5vw">
    <!-- 上层卡片 -->
    <el-card id="card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="top">
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="盘点单号">
              <el-input v-model="formInline.code" class="input" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点状态">
              <el-select
                v-model="formInline.status"
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in enumeration.inventory.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点类型">
              <el-select
                v-model="formInline.type"
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in enumeration.counting.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btnpos">
            <el-form-item>
              <el-button type="primary" class="btnSearch" @click="btnSearch">搜索</el-button>
              <el-button type="primary" class="btnReset" @click="btnReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="货主">
              <el-select
                v-model="formInline.ownerId"

                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in enumeration.owner.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点货区">
              <el-cascader
                v-model="formInline.value"
                placeholder="请选择"
                :options="options"
                style="width:100%"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card id="card2">
      <el-row class="rowone">
        <el-button class="add-btn" @click="handlePD('null')">新增盘点单</el-button>
        <el-button>生成盘点单</el-button>
      </el-row>
      <el-row>
        <el-table
          stripe
          :header-cell-style="{background:'#f9f6ee','text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :default-sort="{prop: 'date', order: 'descending'}"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="68"
          />
          <el-table-column
            prop="code"
            label="盘点单号"
            width="160"
          />
          <el-table-column
            prop="ownerName"
            label="货主"
            width="150"
          />
          <el-table-column
            prop="status"
            label="盘点单状态"
            :formatter="formatterStatus"
            :filters="enumeration.inventory.options"
            :filter-method="statusHandler"
            width="160"
          />
          <el-table-column
            prop="createTime"
            sortable
            label="创建时间"
            width="200"
          />
          <el-table-column
            prop="planCheckTime"
            label="计划盘点时间"
            sortable
            width="160"
          />
          <el-table-column
            prop="reason"
            label="盘点原因"
            width="160"
            :formatter="formatterReason"
            :filters="enumeration.reason.options"
            :filter-method="reasonHandler"
          />
          <el-table-column
            prop="dimension"
            label="盘点维度"
            :formatter="formatterDimension"
            :filters="enumeration.dimension.options"
            :filter-method="dimensionHandler"
            width="160"
          />
          <el-table-column
            prop="type"
            label="盘点类型"
            :formatter="formatterType"
            width="160"
          />
          <el-table-column
            prop="warehouseName"
            label="盘点仓库"
            width="160"
          />
          <el-table-column
            prop="areaName"
            label="盘点库区"
            width="160"
          />
          <el-table-column
            prop="createName"
            label="创建人"
            width="160"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="250"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.status=='1'" type="text" size="small" @click="handlePD(scope.row.code)">修改详情</el-button>
              <el-button v-if="scope.row.status=='1'" type="text" size="small">生成盘点任务</el-button>
              <el-button v-if="scope.row.status=='1'" type="text" size="small" @click="cancelPD(scope.row.id,scope.row.code)">取消</el-button>
              <el-button v-else type="text" size="small" @click="handleClick(scope.row.id)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="page">
        <el-pagination
          align="center"
          :current-page="pageConfig.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageConfig.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- <search-control :searh-bar="searhBar" @search="search">
      <template>你好</template>
    </search-control> -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>确定要取消盘点单号为:{{ PD.PD }} 的单号</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import enumeration from '@/components/SearchControl/selete.js'
// 导入请求接口
import { getCheckpage, getuseWarehouse, getArealist, cancelPD } from '@/api/inventory.js'

export default {
  data() {
    return {
      enumeration,
      formInline: {
        code: '',
        value: [],
        ownerId: '',
        status: ''
      },
      // 盘点渲染表单
      tableData: [],
      // 分页配置
      pageConfig: {
        current: 1,
        size: 5
      },
      // 总数据total
      total: 0,
      // 级联选择器数据
      options: [],
      search: {},
      // 对话框控制
      dialogVisible: false,
      PD: {
        PD: '',
        id: ''
      }

      // 级联懒加载

    }
  },
  async created() {
    await this.init()
    await this.getArea()
    // console.log(this.options)
  },
  methods: {
    handleClick(id) {
      this.$router.push({ path: `/managestorage/list/listdetail/${id}` })
    },
    // 获取可使用仓库
    async getArea() {
      // 获取可使用仓库
      const res = (await getuseWarehouse()).data.data
      // console.log(res)
      // res.forEach(async(element) => {
      //   // 空数组接收根据仓库id返回的库区
      //   const children = []
      //   // 根据id发送请求
      //   const result = (await getArealist(element.id)).data.data
      //   // console.log(result)
      //   // 如果存在则进行遍历
      //   if (result) {
      //     result.forEach(el => {
      //       children.push({ label: el.name, value: el.id })
      //     })
      //   }
      //   // 构造options
      //   this.options.push({ label: element.name, value: element.id, children })
      //   console.log(this.options)
      // })
      for (let i = 0; i < res.length; i++) {
        const result = await getArealist(res[i].id)
        const children = []
        // console.log('子项目', res)
        if (result.data.data) {
          result.data.data.forEach(el => {
            // console.log(1)
            children.push({ 'label': el.name, 'value': el.id })
          })
        }
        this.options.push({ label: res[i].name, value: res[i].id, children })
      }
    },
    // 页面渲染
    async init() {
      const res = await getCheckpage({ ...this.pageConfig, ...this.search })
      // console.log('aaa', res)
      this.tableData = res.data.data.records
      this.total = +res.data.data.total
      // console.log(this.total)
    },
    // 页面切换拿数据
    handleCurrentChange(current) {
      // console.log(current)
      this.pageConfig.current = current
      this.init()
    },
    // 改变页面尺寸
    handleSizeChange(size) {
      this.pageConfig.size = size
      this.init()
    },
    // 盘点单状态格式化
    formatterStatus(row, col, val) {
      // console.log(typeof val)
      const res = enumeration.inventory.options.find(item => item.value === val)
      // console.log(res)
      return res ? res.label : ''
    },
    // 盘点原因格式化
    formatterReason(row, col, val) {
      const res = enumeration.reason.options.find(item => item.id === val)
      return res ? res.value : ''
    },
    // 盘点维度格式化
    formatterDimension(row, col, val) {
      const res = enumeration.dimension.options.find(item => item.id === val)
      return res ? res.value : ''
    },
    // 盘点类型格式化
    formatterType(row, col, val) {
      const res = enumeration.counting.options.find(item => item.value === val)
      return res ? res.label : ''
    },
    // 盘点单状态筛选控制
    statusHandler(value, row) {
      console.log(value, row)

      return row.status === value
    },
    // 盘点原因控制
    reasonHandler(value, row) {
      console.log(value, row)
      const res = enumeration.reason.options.find(item => item.value === value)
      // console.log(res)
      return row.reason === res.id
    },
    // 盘点维度控制
    dimensionHandler(value, row) {
      // console.log(value)
      const res = enumeration.dimension.options.find(item => item.value === value)
      return row.dimension === res.id
    },
    // 搜索
    btnSearch() {
      if (!this.formInline.ownerId) delete this.formInline.ownerId
      if (!this.formInline.status) delete this.formInline.status
      if (!this.formInline.type) delete this.formInline.type
      // console.log(this.formInline)
      const search = { ...this.formInline, areaId: this.formInline.value[1] }
      if (!search.areaId) delete search.areaId
      delete search.value
      console.log(search)
      this.search = search
      this.init()
    },
    // 重置
    btnReset() {
      console.log(1)
      this.formInline = { code: '', status: '', type: '', value: [], ownerId: '' }
      this.search = { code: '' }
      this.init()
    },
    handlePD(id) {
      this.$router.push({ path: `list/detail/${id}` })
    },
    // 取消新建单
    cancelPD(id, PD) {
      // console.log(PD)
      this.PD.PD = PD
      this.PD.id = id
      this.dialogVisible = true
      // const res = await cancelPD(id)
      // console.log(res)
    },
    // 取消新建单确认
    async cancelOK() {
      await cancelPD(this.PD.id)
      this.$message.success('取消成功')
      this.dialogVisible = false
    }

  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/list.scss';
.cell{ .el-button--text {
color: $table-operate;
}
}
.add-btn {
width: 108px;
margin: 10px 0;
background-color: $table-add;
border-radius: 20px;
color: white;
}
</style>
